<template>
  <van-tabs v-model:active="active">
    <van-tab title="概述"><div v-html="props.details"></div></van-tab>
    <van-tab title="热评"><div :style="{textAlign: 'center'}">暂无评价</div></van-tab>
    <van-tab title="相关图书">
      <div class="likeGoods">
        <div class="item" v-for="(item, index) in props.recommendProduct as any" :key="index">
           <img :src="item.cover_url" alt="" class="img"/>
           <p class="title">{{item.title}}</p>
           <p class="description">
            <span class="price">￥{{item.price}}</span> <van-icon class="like" name="star-o" />
            <span>{{item.collects_count}}</span>
           </p>
        </div>
      </div>
    </van-tab>
  </van-tabs>
</template>

<script lang="ts" setup>
import { ref, defineProps } from 'vue'
const props = defineProps({
  details: { type: String, required: true },
  recommendProduct: { type: Array, required: true }
})

const active = ref(0)
</script>

<style lang="scss" scoped>
.item{
  width: 32%;
  margin-left: 1%;
  display: inline-block;
  margin-bottom: 8px;
  font-size: 12px;
  &:last-child{
    margin-bottom: 0px;
  }
  .img{
    width: 100%;
    height: 100px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .title{
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin:4px 0 8px
  }
  .description{
    text-align: center;
  }
}
</style>
